/*
 * @Author: nqx2007 fenglimima334@163.com
 * @Date: 2023-12-05 14:22:46
 * @LastEditors: nqx2007 fenglimima334@163.com
 * @LastEditTime: 2023-12-10 22:28:04
 * @FilePath: /operator-manager/src/pages/FindPw/components/EnterPassword/EnterPassword.tsx
 * @Description: 找回密码-重置密码表单
 */
import { Form, Input } from 'antd';
import { forwardRef, useImperativeHandle } from 'react';
import { FindForm } from '../../type.d';

const EnterPassword: React.ForwardRefRenderFunction<
  unknown,
  Record<string, any>
> = (_, ref) => {
  const [form] = Form.useForm();
  useImperativeHandle(
    ref,
    () => {
      return {
        enterPasswordForm: form,
      };
    },
    [form],
  );
  return (
    <Form
      style={{ width: '100%' }}
      form={form}
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 19 }}
      requiredMark
    >
      <Form.Item
        label="密码"
        name={FindForm.PASSWORD}
        rules={[
          { required: true, message: '请输入密码' },
          {
            pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,18}$/,
            message: '请输入6-18位包含数字和字母的密码',
          },
        ]}
      >
        <Input.Password
          placeholder="输入6-18位密码，至少包括数字和字母"
          autoComplete="new-password"
        />
      </Form.Item>
      <Form.Item
        label="确认密码"
        name={FindForm.CONFIRM}
        dependencies={[FindForm.PASSWORD]}
        rules={[
          { required: true, message: '请再次输入密码' },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue(FindForm.PASSWORD) === value) {
                return Promise.resolve();
              }
              return Promise.reject(new Error('两次输入密码不匹配'));
            },
          }),
        ]}
      >
        <Input.Password
          placeholder="重新输入密码"
          autoComplete="confirm-password"
        />
      </Form.Item>
    </Form>
  );
};

export default forwardRef(EnterPassword);
